<style lang="less" scoped>
	@border-color:#E3E8EA;//边框颜色
	@font-color:#686E71;//正常字体颜色
	@primary-color:#FE9333;//橘黄色默认颜色
     *{
        word-wrap:break-word;
        
    }
    body,html{
        overflow-y: hidden;
        overflow-x: hidden;
        height: 100%;
    }
    .leftCenter{
        position: absolute;
        width: 240px;
        height: 100%;
    }
    .rightCenter{
        position: absolute;
        width: 87.5%;
        min-width: 1000px;
        left: 240px;
        min-height: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px;   
        .title{
            width: 100%;
            height: 50px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            text-align: center;
            margin-bottom: 10px;
            span{
                line-height: 46px;
                display: inline-block;
                margin-right: 60px;
                font-size: 14px;
                cursor: pointer;
            }
            .on{
                color:@primary-color;
                border-bottom: 2px solid @primary-color;
            }
        }
        .info{
            width: 100%;
            padding: 50px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            .ewmbind{
                width: 1026px;
                min-height: 650px;
                margin: 0 auto;
                Form{
                    width: 552px;
                    margin-left: 237px;
                }
                Button{
                    width: 150px;
                    height: 40px;
                    box-shadow: 4px 4px 4px 0 rgba(240,100,115,0.21);
                    margin-top: 36px;
                    margin-left: 438px;
                    font-size: 16px;
                }
                .ptitle{
                    font-size: 14px;
                    text-indent: 4px;
                    color: #686E71;
                    line-height: 22px;
                    margin: 60px 0 10px 0;
                }
            }
            .mxdata{
                width: 1026px;
                min-height: 650px;
                margin: 0 auto;
                 Form{
                    width: 795px;
                    margin-left: 123px;
                }
                Button{
                    width: 150px;
                    height: 40px;
                    box-shadow: 4px 4px 4px 0 rgba(240,100,115,0.21);
                    margin-top: 36px;
                    margin-left: 438px;
                    font-size: 16px;
                }
            }
            .peopledata{
                 width: 1026px;
                 min-height: 650px;
                 margin: 0 auto;
                 Form{
                    width: 552px;
                    margin-left: 237px;
                }
                Button{
                    width: 150px;
                    height: 40px;
                    box-shadow: 4px 4px 4px 0 rgba(240,100,115,0.21);
                    margin-top: 36px;
                    margin-left: 438px;
                    font-size: 16px;
                }
            }
        }

        .table{
                width: 1026px;
                border-spacing:4px;
            .th{
                line-height: 40px;
                color: #fff;
                width: 100%;
                background-color: #fff;
                th{
                    font-weight: normal;
                    background-color: #686E71;                             
                }
                th:nth-child(1){
                    width: 250px;
                    max-width: 250;
                }
                th:nth-child(2){
                    width: 518px;
                    max-width: 518px;
                }
                th:nth-child(3){
                    width: 240px;
                    max-width: 240px;
                }
            }
            .tr{
                color: #686E71;
                text-align: center;                        
                td{
                    font-weight: normal;
                    padding: 9px 0px;                      
                }
                td:nth-child(1){
                    width: 250px;
                    max-width: 250px;                            
                }
                td:nth-child(2){
                    width: 518px;
                    max-width: 518px;
                }
                td:nth-child(3){
                    width: 240px;
                    max-width: 240px;
                }
            }
            .tr:nth-child(odd){//奇数
                td{
                    background-color: #FFFAF6;                                                                                    
                }
            }
            .tr:nth-child(even){//偶数
                td{
                    background-color: #F5F8F9;                                                                                   
                }
            }
            
        }
        .table2{
            margin-top: 60px;
            width: 1026px;
            border-spacing:4px;
            .th{
                line-height: 40px;
                color: #fff;
                width: 100%;
                background-color: #fff;
                th{
                    font-weight: normal;
                    background-color: #686E71;                             
                }
                th:nth-child(1){
                    width: 200px;
                    max-width: 200;
                }
                th:nth-child(2){
                    width: 160px;
                    max-width: 160px;
                }
                th:nth-child(3){
                    width: 300px;
                    max-width: 300px;
                }
                 th:nth-child(4){
                    width: 200px;
                    max-width: 200px;
                }
                 th:nth-child(5){
                    width: 140px;
                    max-width: 140px;
                }
            }
            .tr{
                color: #686E71;
                text-align: center;                        
                td{
                    font-weight: normal;
                    padding: 15px 30px;                        
                }
                td:nth-child(1){
                    width: 200px;
                    max-width: 200;
                }
                td:nth-child(2){
                    width: 160px;
                    max-width: 160px;
                    .img{
                        width: 102px;
                        height: 70px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img{
                            max-height: 100%;
                            max-width: 100%;
                        }
                    }
                }
                td:nth-child(3){
                    width: 300px;
                    max-width: 300px;
                }
                td:nth-child(4){
                    width: 200px;
                    max-width: 200px;
                }
                td:nth-child(5){
                    width: 140px;
                    max-width: 140px;
                    span{
                        cursor: pointer;
                    }
                    span:nth-child(1){
                        margin-right: 20px;
                        color:#FE9333;
                    }
                }
            }
            .tr:nth-child(odd){//奇数
                td{
                    background-color: #FFFAF6;                                                                                    
                }
            }
            .tr:nth-child(even){//偶数
                td{
                    background-color: #F5F8F9;                                                                                   
                }
            }
        }
        .table3{
            margin-top: 60px;
            width: 1026px;
            border-spacing:4px;
            .th{
                line-height: 40px;
                color: #fff;
                width: 100%;
                background-color: #fff;
                th{
                    font-weight: normal;
                    background-color: #686E71;                             
                }
                th:nth-child(1){
                    width: 158px;
                    max-width: 158px;
                }
                th:nth-child(2){
                    width: 150px;
                    max-width: 150px;
                }
                th:nth-child(3){
                    width: 70px;
                    max-width: 70px;
                }
                 th:nth-child(4){
                    width: 110px;
                    max-width: 110px;
                }
                 th:nth-child(5){
                    width: 110px;
                    max-width: 110px;
                }
                 th:nth-child(6){
                    width: 70px;
                    max-width: 70px;
                }
                 th:nth-child(7){
                    width: 170px;
                    max-width: 170px;
                }
                 th:nth-child(8){
                    width: 150px;
                    max-width: 150px;
                }
            }
            .tr{
                color: #686E71;
                text-align: center;                        
                td{
                    font-weight: normal;
                    padding: 9px 0px;                        
                }
                td:nth-child(1){
                    width: 158px;
                    max-width: 158px;
                }
                td:nth-child(2){
                    width: 150px;
                    max-width: 150px;
                }
                td:nth-child(3){
                    width: 70px;
                    max-width: 70px;
                }
                 td:nth-child(4){
                    width: 110px;
                    max-width: 110px;
                }
                 td:nth-child(5){
                    width: 110px;
                    max-width: 110px;
                }
                 td:nth-child(6){
                    width: 70px;
                    max-width: 70px;
                }
                 td:nth-child(7){
                    width: 170px;
                    max-width: 170px;
                }
                 td:nth-child(8){
                    width: 150px;
                    max-width: 150px;
                    span{
                        cursor: pointer;
                    }
                    span:nth-child(1){
                        margin-right: 20px;
                        color:#FE9333;
                    }
                }

            }
            .tr:nth-child(odd){//奇数
                td{
                    background-color: #FFFAF6;                                                                                    
                }
            }
            .tr:nth-child(even){//偶数
                td{
                    background-color: #F5F8F9;                                                                                   
                }
            }
        }
        .showImg{
            width: 250px;
            height: 170px;
            display: inline-block;
            vertical-align: top;
            position: relative;
            border-radius: 4px;
            .img{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 4px;                        
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            p{
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: rgba(0,0,0,0.6);
                color: #fff;
                line-height: 30px;
                height: 30px;
                width: 100%;
                text-align: center;
                display: none;
                span{
                    cursor: pointer;
                }
                .change{
                        float: right;
                    margin-right: 30px;
                }
                .del{
                    float: right;
                    margin-right: 30px;
                }
            }
        }
        .showImg:hover{
            p{
                display: block;
            }
        }
        .showPop{
            width: 430px;
            display: inline-block;
            padding: 13px 14px;
            line-height: 24px;
            vertical-align: top;
            background-color: #FFFAF6;
            color: #FE9333 ;
            font-size: 14px;
            border: 1px solid #FEE0C5;
            border-radius: 4px;                        
            margin-left: 18px;
            
        }
    }
</style>
<<style lang="less">
    .ewmbind,.mxdata,.peopledata{
        font-size:14px;
        .ivu-form-item{
            margin-right:0px;
            margin-bottom:24px;
            .ivu-form-item-label:before{
                display:none;
            }
        }        
        .ivu-form-item-label{
            font-size:14px;
            color:#686E71;
            padding: 13px 22px 13px 0;
        }
        .ivu-input{
            height:40px;
            line-height:40px;
            width: 460px;
        }   
        .ivu-select-selection{
            height:40px;
            line-height:40px;
            .ivu-select-placeholder, .ivu-select-selected-value{
                height:40px;
                line-height:40px;
            }
        }
         .ivu-input-icon{
            width: 40px;
            height:40px;
            line-height:40px;
        }
        .name{
            .ivu-input{
                width: 250px;
            }
            .ivu-select{
                width: 250px;
                height:40px;
                line-height:40px;
                font-size:14px;
            }
        }
        .sex{          
            .ivu-select{
                width: 130px;
                height:40px;
                line-height:40px;
                font-size:14px;
            }
            .ivu-select-item{
                // padding:0 0 0 8px;
            }
        }
        .idcardtype{
             .ivu-select{
                width: 150px;
                height:40px;
                line-height:40px;
                font-size:14px;
            }
            
        }
        .idcard{
            .ivu-input{
                width: 231px;
            }
           
        }
        .zjchoose{
            .ivu-select-selection{
            height:40px;
            line-height:40px;
            .ivu-select-placeholder, .ivu-select-selected-value{
                height:40px;
                line-height:40px;
                width: 460px;
            }
            }
        }
    }

    .jzd{
        .ivu-select{
            width: 152px;
            height:40px;
            line-height:40px;
            .ivu-select-selection{
                height:40px;
                line-height:40px;
                .ivu-select-placeholder{
                        height:40px;
                    line-height:40px;
                }
                .ivu-select-selected-value{
                    height:40px;
                    line-height:40px;
                }                   
            }
        }
        .ivu-select-item{
            // padding:0 0 0 8px;
        }
        .ivu-input-type{
            margin-top:10px;
        }
        
    }
    
</style>

<template>
	<div>
        <!--左侧个人导航-->
        <v-userCenter class="leftCenter" :li1="li1" :li2="li2" :li3="li3" :li4="li4" :headerPicture="headerPicture" :username="username"></v-userCenter>
        <!--右侧内容-->
        <div class="rightCenter">
            <!--标题-->
            <div class="title">
                <span :class="jcdataClass" @click="chooset1()">二维码绑定</span>
                <span :class="threebing" @click="chooset2()" >墓穴信息</span>
                <span :class="zjzl" @click="chooset3()" >传记人物资料</span>
            </div>
            <!--二维码绑定-->
            <div class="info" v-show="infoDiv1">
                <div class="ewmbind">
                    <Form  ref="formEwmBind" :model="formEwmBind" prop="formEwmBind" :rules="formEwmBindRule" label-position="right" :label-width="92" class="" inline>
                        <Form-item label="传记选择" class="zjchoose" prop="cemeteryId">
                            <Select  v-model="formEwmBind.cemeteryId" class="Selectprovince" placeholder="请选择要绑定的传记">
                                <Option value="" label-in-value="true">{{"请选择要绑定的传记"}}</Option>
                                <Option v-for="item in cemeteryNotBindingList" :value="item.cemeteryId" :key="item" label-in-value="true">{{ item.userName }}</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="二维码编码"  prop="ewmIuput">                        
                            <Input v-model="formEwmBind.ewmIuput" placeholder="请输入与此人物传记绑定的二维码" :maxlength="15"></Input>
                        </Form-item>                    
                    </Form>
                    <Button type="warning" @click="ewmBindFun('formEwmBind')">确认提交</Button>
                    <p class="ptitle" v-if="cemeteryBindingList!=0" >已绑定传记</p>
                    <table class="table" v-if="cemeteryBindingList!=0">
                        <tr class="th"><th>人物传记名称</th><th>二维码编码</th><th>状态</th></tr>
                        <!--内容-->
                        <tr class="tr" v-for="item in cemeteryBindingList" ><td>{{item.userName}}</td><td><p>{{item.qrCode}}</p></td><td>{{item.status==1?'审核中':(item.status==2?'审核通过':'审核失败')}}</td></tr>                        
                    </table>            
                </div>                
            </div>
            <!--墓穴信息-->
            <div class="info" v-show="infoDiv2">
               <div class="mxdata">
                    <Form :model="formMxData"  ref="formMxData"  :rules="formMxDataRule" label-position="right" :label-width="92" class="" inline>
                        <Form-item label="传记选择" class="zjchoose" prop="cemeteryId">
                           <Select  v-model="account.cemeteryId" class="Selectprovince" placeholder="请选择要绑定的传记">
                               <Option value="" label-in-value="true">{{"请选择要绑定的传记"}}</Option>
                                <Option v-for="item in graveNoEditlist" :value="item.cemeteryId+','+item.graveId" :key="item" label-in-value="true">{{ item.userName }}</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="墓地证书" prop="certificatePath">       
                            <!---->
                            <div class="showImg">
                                <div class="img">
                                    <img  :src=" account.certificatePath ? imgurl + account.certificatePath : staticimg+'/images/zhengshu.png'" />
                                </div>
                                <!--上传照片-->
                                <p v-show="!account.certificatePath">
                                    <Upload  :on-success="handleSuccess" 
                                    :format="['jpg','jpeg','png','BMP']"
                                    :on-format-error="uploadPhotoError"
                                    :show-upload-list="false" 
                                    :action="hotsimg+'/cemeteryGrave/uploadCertificate'" :headers="tokendata" name="certificate">
                                        <span>立即上传</span>                                     
                                    </Upload>   
                                </p>
                                <p  v-show="account.certificatePath">
                                    <span class="del" @click="delMxphoto()">删除</span>
                                    <Upload  :on-success="handleSuccess" 
                                    :format="['jpg','jpeg','png','BMP']"
                                    :on-format-error="uploadPhotoError"
                                    :show-upload-list="false" :action="hotsimg+'/cemeteryGrave/uploadCertificate'" :headers="tokendata" name="certificate">
                                       <span class="change">重新上传</span>                                     
                                    </Upload>                                   
                                </p>
                            </div>
                            <!--提示语-->
                            <div  class="showPop">
                                墓地证书图片要求：<br />
                                1. 该信息仅用于管理员审核使用，身份信息将完全保密。<br />
                                2. 请上传墓地证书电子档。<br />
                                3. 要求姓名、证件号码、印章等都清晰可见。<br />
                                4. 照片支持JPG、JPEG、PNG、BMP格式。<br />
                                <!-- 5. 文件体积小于5MB。<br />                                -->
                            </div>
                        </Form-item> 
                        <Form-item label="墓穴位置" class="jzd" prop="cemeteryProvinceId">
                            <div>                                              
                                <Select  v-model="account.cemeteryProvinceId" class="Selectprovince" placeholder="请选择省">
                                    <Option value="" label-in-value="true">{{"请选择省"}}</Option>
                                    <Option v-for="item in provinceList" :value="item.areaId" :key="item" label-in-value="true">{{ item.areaName }}</Option>                                    
                                </Select>
                                <Select  v-model="account.cemeteryCityId" placeholder="请选择市">
                                    <Option value="" label-in-value="true">{{"请选择市"}}</Option>
                                    <Option v-for="item in cityList" :value="item.areaId" :key="item" >{{ item.areaName }}</Option>
                                </Select>
                                <Select  v-model="account.areaId" placeholder="请选择区" >
                                    <Option value="" label-in-value="true">{{"请选择区"}}</Option>
                                    <Option v-for="item in districtList" :value="item.areaId" :key="item">{{ item.areaName }}</Option>  
                                </Select>
                            </div> 
                            <Select  v-model="account.cemeteryNameId" placeholder="请选择陵园"  style="width:230px;margin-top:10px;">
                                <Option value="" label-in-value="true">{{"请选择陵园"}}</Option>
                                <Option v-for="item in lyList" :value="item.id" :key="item">{{ item.cemeteryName }}</Option>
                            </Select>
                            <Select  v-model="account.cemeteryParkId" placeholder="请选择园区"  style="width:230px;margin-top:10px;">
                                <Option value="" label-in-value="true">{{"请选择园区"}}</Option>
                                <Option v-for="item in yqList" :value="item.id" :key="item">{{ item.cemeteryName }}</Option>
                            </Select>
                            <Input v-model="account.address" placeholder="请输入详细地址" :maxlength="30"></Input>
                        </Form-item>            
                        <Form-item label="墓穴号" prop="acupointNumber">
                            <Input v-model="account.acupointNumber" placeholder="请输入墓穴号" :maxlength="50"></Input>
                        </Form-item>        
                    </Form>
                    <Button type="warning" @click="submitMx()">确认提交</Button>
                    <table class="table2" v-if="graveEditlist!=0">
                        <tr class="th"><th>人物传记名称</th><th>墓地证书</th><th>墓穴位置</th><th>墓穴号</th><th>操作</th></tr>
                        <!--内容-->
                        <tr class="tr" v-for="item in graveEditlist">
                            <td>{{item.userName}}</td>
                            <td><div class="img"><img :src="item.certificatePath? imgurl+item.certificatePath :staticimg+'/images/zhengshu.png'"/></div></td>
                            <td>{{item.cemeteryProvince+item.cemeteryCity+item.areaName+item.cemeteryName+item.cemeteryPark+item.address}}</td>
                            <td>{{item.acupointNumber}}</td>
                            <td><span @click="delMxdata(item.cemeteryId)">删除</span></td>
                        </tr>                        
                    </table>            
                </div>        
            </div>
            <!--传记人物资料-->
            <div class="info" v-show="infoDiv3">
                 <div class="peopledata">
                    <Form :model="formZjData" ref="formZjData" label-position="right" :label-width="78" class="userInfo" inline>
                        <Form-item label="传记选择" class="zjchoose">
                           <Select  v-model="account2.cemeteryId" class="Selectprovince" placeholder="请选择要编辑的传记">
                                <Option value="" label-in-value="true">{{"请选择要编辑的传记"}}</Option>                               
                                <Option v-for="item in lifebookNoEditlist" :value="item.cemeteryId" :key="item" label-in-value="true">{{ item.userName }}</Option>
                            </Select>
                        </Form-item>
                        <!-- <Form-item label="证件类型" class="idcardtype" prop="cardType">
                            <Select  v-model="account2.cardType" class="Selectprovince" placeholder="请选择证件类型">
                                <Option v-for="item in idcardList" :value="item.code" :key="item" label-in-value="true">{{ item.value }}</Option>
                            </Select>
                        </Form-item> -->
                        <Form-item label="证件号"  prop="cardNo">
                            <Input v-model="account2.cardNo" placeholder="请输入故者的身份证号" :maxlength="50"></Input>
                        </Form-item>
                        <Form-item label="真实姓名" class="name" prop="fullName">
                            <Input v-model="account2.fullName" placeholder="请输入故者姓名" :maxlength="10"></Input>
                        </Form-item>
                        <Form-item label="性别"  class="sex" prop="gender">
                            <Select  placeholder="性别" v-model="account2.gender">
                                <Option value="M" >{{ '男' }}</Option>
                                <Option value="F" >{{ '女' }}</Option>
                            </Select>
                        </Form-item>
                        <!-- <Form-item label="生卒日期">
                           <Date-picker type="daterange" placement="bottom-start" placeholder="选择日期" :editable="false" :value="account2.birthAndDeathDate" @on-change="timeChange"></Date-picker>
                        </Form-item> -->
                        <Form-item label="民族" class="name">
                            <Select  v-model="account2.nation" class="Selectprovince" placeholder="请选择故者民族">
                                <Option v-for="item in nationList" :value="item.sortNum" :key="item" label-in-value="true">{{ item.value }}</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="籍贯" class="jzd">
                            <Select  v-model="account2.nativeProvinceId" class="Selectprovince" placeholder="请选择省">
                                <Option value="" label-in-value="true">{{"请选择省"}}</Option>
                                <Option v-for="item in jgprovinceList" :value="item.areaId" :key="item" label-in-value="true">{{ item.areaName }}</Option>
                            </Select>
                            <Select  v-model="account2.nativeCityId" placeholder="请选择市">
                                <Option value="" label-in-value="true">{{"请选择市"}}</Option>                                
                                <Option v-for="item in jgcityList" :value="item.areaId" :key="item" >{{ item.areaName }}</Option>
                            </Select>
                            <Select  v-model="account2.nativeAreaId" placeholder="请选择区" not-found-text="请选择区">
                                <Option value="" label-in-value="true">{{"请选择区"}}</Option>                                                                
                                <Option v-for="item in jgdistrictList" :value="item.areaId" :key="item">{{ item.areaName }}</Option>
                            </Select>
                        </Form-item>              
                    </Form>
                     <Button type="warning" @click="submitZjData()">确认提交</Button>
                     <table class="table3" v-if="lifebookEditlist != 0">
                        <tr class="th"><th>人物传记名称</th><th>姓名</th><th>性别</th><th>出生日期</th><th>逝世日期</th><th>民族</th><th>籍贯</th><th>操作</th></tr>
                        <!--内容-->
                        <tr class="tr" v-for="item in lifebookEditlist">
                            <td>{{item.userName}}</td>
                            <td>{{item.fullName}}</td>
                            <td>{{item.gender}}</td>
                            <td>{{item.birthday?filter(item.birthday):""}}</td>
                            <td>{{item.deathday?filter(item.deathday):""}}</td>
                            <td>{{item.nationName}}</td>
                            <td>{{item.nativeProvince+item.nativeCity+item.nativeArea}}</td>
                            <td><span @click="delzjdata(item.cemeteryId)">删除</span></td>
                        </tr>                        
                    </table> 
                 </div>
            </div>
        </div> 

	</div>
</template>
<script>
    import global from '../../config/global'
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
        data() {
			return {
                imgurl:global.imgurl,
                staticimg:global.staticimg,
				videourl:global.videourl,
				musicurl:global.musicurl,
                formRight:"",
                province:"",
				city:"",
				district:"",
				provinceList:[],
				cityList:[],
				districtList:[],
                lyList:[],
                yqList:[],
                jcdataClass:"on",//二维码绑定
                threebing:"",//墓穴信息
                zjzl:"",//传记人物资料
                li1:"li1 ",
                li2:"li2 ",
                li3:"li3 on3",
                li4:"li4",
                infoDiv1:true,//二维码绑定
                infoDiv2:false,//墓穴信息
                infoDiv3:false,//传记人物资料
                cemeteryNotBindingList:"",//未绑定列表
                cemeteryBindingList:"",//绑定后列表
                formEwmBind:{
                    cemeteryId:'',//墓主ID
                    ewmIuput:'',//输入的二维码
                },
                formEwmBindRule:{
                    ewmIuput:[
                        { required: true, message: '请输入您二维码编码', trigger: 'blur' },
                    ]
                },
                hotsimg:"",//图片路径前缀
                tokendata:"",
                mxphotoSrc:"",//墓穴照片路径
                graveEditlist:"",//已绑定墓穴信息列表
                graveNoEditlist:"",//未已绑定墓穴信息列表
                formMxData:{
                    cemeteryId:"",//墓主ID
                },
                formZjData:{
                    cemeteryId:'',//墓主ID
                },
                account:{
                    "cemeteryId":"",
                    "graveId":'',//墓主ID
                    "certificatePath":'',//图片路径
                    "cemeteryProvinceId":'',//居住地省份
                    "cemeteryCityId":'',//市
                    "areaId":'',//区
                    "cemeteryNameId":'',//陵园
                    "cemeteryParkId":'',//园区
                    "address":'',//详细地址
                    "acupointNumber":'',//墓穴号            
                    "source":2,       
                },//墓穴基础信息               
                account2:{
                    "cemeteryId":"",//墓主ID
                    "cardType":"",//证件类型
                    "cardNo":"",//证件号
                    "fullName":"",//真是姓名
                    "gender":"",//性别
                    "nation":"",//民族
                    "nativeAreaId":"",//籍贯区
                    "nativeCityId":"",//籍贯市
                    "nativeProvinceId":"",//籍贯省
                    "birthAndDeathDate":'',//生卒日期
                    "source":2, 
                },
                lifebookEditlist:"",//提交过信息人物传记
                lifebookNoEditlist:"",//未提交信息人物传记
                nationList:[],//民族列表
                idcardList:[],//证件类型列表
                jgprovinceList:[],
                jgcityList:[],
                jgdistrictList:[],
                headerPicture:"",
                username:""
			}
		},
        created() {
            this.ajax();
            if(localStorage.getItem('headerImg') != null){
                this.headerPicture = localStorage.getItem('headerImg');     
            }
            if(localStorage.getItem('nickname') != null){
                this.username = localStorage.getItem('nickname');     
            }
		},
        watch:{
            "account.cemeteryId":"chooseZj",//
            "account2.cemeteryId":"chooseZj2",
			"account.cemeteryProvinceId":"getprovince",//居住地
			"account.cemeteryCityId":"getcity",//
			"account.areaId":"getly",//
			"account.cemeteryNameId":"getyq",//
            "account2.nativeProvinceId":"getprovince2",//居住地
			"account2.nativeCityId":"getcity2",//
		},
		methods: {
            filter(value) {//value为13位的时间戳
				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(value));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				return y + '.' + add0(m) + '.' + add0(d) + '';
			},
            ajax(){
                this.hotsimg = global.host;
                this.tokendata={"Authorization":this.user.token_type+" "+this.user.access_token}
                //获取传记列表
                this.$http.get(global.host+'/account/cemetery/query',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {	
                    if(response.body.status==1){
                        this.cemeteryNotBindingList = response.body.cemeteryNotBindingList;
                        this.cemeteryBindingList = response.body.cemeteryBindingList;
                    }
                })
            },
            chooset1(){//二维码绑定
                this.jcdataClass = "on";//选中样式
                this.threebing = "";
                this.zjzl = "";
                this.infoDiv1 = true;
                this.infoDiv2 = false;
                this.infoDiv3 = false;
                //获取传记列表
                this.ajax();
            },
            chooset2(){//墓穴信息
                this.jcdataClass = "";
                this.threebing = "on";
                this.zjzl = "";
                this.infoDiv1 = false;
                this.infoDiv2 = true;
                this.infoDiv3 = false;
                this.$http.get(global.host+'/cemeteryGrave/query/edit/grave',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {	
                    if(response.body.result==1){
                        this.graveEditlist = response.body.graveEditlist;
                        this.graveNoEditlist = response.body.graveNoEditlist;
                    }
                })
                this.Getprovince();
            },
            chooset3(){//传记人物资料
                this.jcdataClass = "";
                this.threebing = "";
                this.zjzl = "on";
                this.infoDiv1 = false;
                this.infoDiv2 = false;
                this.infoDiv3 = true;            
                this.Getprovince2();    
                this.getnation();
                this.getIdcardtype();
                this.$http.get(global.host+'/cemeteryGrave/query/edit/lifebook',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {	
                    if(response.body.result==1){
                        this.lifebookNoEditlist = response.body.lifebookNoEditlist;
                        this.lifebookEditlist = response.body.lifebookEditlist;
                    }
                })
            },
            ewmBindFun(name){
                if(this.formEwmBind.cemeteryId == ""){
                    this.$Message.error('请选择要绑定的人物传记');  
                }else{
                    this.$refs[name].validate((valid) => {
                        if(valid){
                            this.$http.post(global.host+'/cemeteryOwner/qrcode/bind',{"cemeteryId":this.formEwmBind.cemeteryId,"qrcode":this.formEwmBind.ewmIuput},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                            .then((response) => {	
                                if(response.body.status==1){
                                    this.$Message.success('绑定成功!');
                                    this.formEwmBind.ewmIuput = '';
                                    this.chooset1();
                                    this.$Modal.success({
                                        width:"320",
                                        content: "<p>绑定二维码申请已提交，审核通过后传记方可发布，请注意查收消息。</p>",
                                        onOk: () => {                                                            
                                        },
                                    });
                                }else if(response.body.status != 2){
                                    this.$Message.error(response.body.message);  
                                }
                            });
                        }else{

                        }
                    })
                }                             
            },
            Getprovince(){
                //获取省
                this.$http.get(global.host+'/location/province/all/query',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.provinceList = response.body.data;
				})				
            },
             getprovince(value){
				//查询市
				this.$http.get(global.host+"/location/city/query?parentId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.cityList = response.body.data;
				})					
			},
            getcity(value){
				//查询区
				this.$http.get(global.host+"/location/district/query?parentId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.districtList = response.body.data;
				})					
			},
            getly(value){//查询陵园
                this.$http.get(global.host+"/cemeteryComm/cemetery/query/by/area?areaId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.lyList = response.body.data;
                    console.log(this.districtList);
				})
            },
            getyq(value){
                //查询园区
                this.$http.get(global.host+"/cemeteryComm/cemetery/query/by/id?cemeteryId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.yqList = response.body.data;
				})
            },
            submitMx(){
                if(this.account.cemeteryId == ""){
                    this.$Message.error('请选择要绑定的人物传记'); 
                }else{
                    var a = this.account.cemeteryId.split(",")
                    this.account.cemeteryId= a[0];
                    this.account.graveId= a[1];
                    console.log(this.account.cemeteryId);console.log(this.account.graveId);
                    this.$http.post(global.host+'/cemeteryGrave/insert', this.account,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {	
                        if(response.body.status == 1){
                            this.$Message.success('信息修改成功!');  
                            this.account={
                                "cemeteryId":"",
                                "graveId":'',//墓主ID
                                "certificatePath":'',//图片路径
                                "cemeteryProvinceId":'',//居住地省份
                                "cemeteryCityId":'',//市
                                "areaId":'',//区
                                "cemeteryNameId":'',//陵园
                                "cemeteryParkId":'',//园区
                                "address":'',//详细地址
                                "acupointNumber":'',//墓穴号            
                                "source":2,       
                            }  
                            this.chooset2();
                            
                        }else{
                            this.$Message.error(response.body.message);
                        }
                    })
                    .catch(function (response) {
                        
                    });
                }
                
            },
            delMxdata(id){
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这条信息么？</p>",
                    onOk: () => {
                        this.$http.post(global.host+'/cemeteryGrave/delete',{"cemeteryId":id},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status == 1){
                                this.$Message.success(response.body.message);
                                this.chooset2();
                            }
                        })
                        .catch(function (response) {
                            
                        });
                    },
                    onCancel: () => {
                    }
                });               
            },
            chooseZj(id){
                var a = id.split(",")
                this.$http.get(global.host+'/cemeteryOwner/choose?cemeteryId='+a[0],{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.account=Object.assign(this.account, response.body);
                })
                .catch(function (response) {
                    
                });
            },
            chooseZj2(id){
                this.$http.get(global.host+'/cemeteryOwner/lifebook/choose?cemeteryId='+id,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.account2 = Object.assign(this.account2, response.body);
                    this.account2.nation ? this.account2.nation : this.account2.nation="";                    
                    this.account2.gender ? this.account2.gender : this.account2.gender="";
                    this.account2.cardType ? this.account2.cardType : this.account2.cardType="";
                    this.account2.birthAndDeathDate ? this.account2.birthAndDeathDate = this.account2.birthAndDeathDate.split(",") : "";
                })
                .catch(function (response) {
                    
                });
            },
            delzjdata(id){
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这条信息么？</p>",
                    onOk: () => {
                        this.$http.post(global.host+'/cemeteryOwner/lifebook/delete',{"cemeteryId":id},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status == 1){
                                this.$Message.success(response.body.message);
                                this.chooset3();
                            }
                        })
                        .catch(function (response) {
                            
                        });
                    },
                    onCancel: () => {
                    }
                });    
            },
            handleSuccess(res, file){//照片上传图片
                this.account.certificatePath =  file.response.fileName;
            },
            delMxphoto(){
                this.account.certificatePath =  '';
            },
            //传记人物资料编辑
            //籍贯
            Getprovince2(){
                //获取省
                this.$http.get(global.host+'/location/province/all/query',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.jgprovinceList = response.body.data;
				})				
            },
             getprovince2(value){
				//查询市
				this.$http.get(global.host+"/location/city/query?parentId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.jgcityList = response.body.data;
				})					
			},
            getcity2(value){
				//查询区
				this.$http.get(global.host+"/location/district/query?parentId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.jgdistrictList = response.body.data;
				})					
			},
            getnation(){
                //查询民族
                this.$http.get(global.host+"/common/master/data/query?masterDataType=1",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.nationList = response.body.result;
				})	
            },
            getIdcardtype(){
                 //证件类型
                this.$http.get(global.host+"/common/master/data/query?masterDataType=7",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.idcardList= response.body.result;
                    console.log(this.idcardList);
				})
            },
            timeChange(data){
                this.account2.birthAndDeathDate = data;    
            },
            submitZjData(){
                if(this.account2.cemeteryId == ""){
                    this.$Message.error("请先选择传记");
                    
                }else{
                    var idcard =  /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
                    if(!idcard.test(this.account2.cardNo) && this.account2.cardNo !=''){
					this.$Message.error("请输入正确的身份证号!");
                        return;
                    }
                    if(this.account2.birthAndDeathDate[1] != undefined){
                        this.account2.birthAndDeathDate = this.account2.birthAndDeathDate.join(",");                        
                    }else{
                        this.account2.birthAndDeathDate = "";
                    }
                    this.$http.post(global.host+'/cemeteryGrave/edit/lifebook',this.account2,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {	
                        if(response.body.result == 1){
                            this.$Message.success(response.body.message);       
                            this.account2={
                                "cemeteryId":"",//墓主ID
                                "cardType":"",//证件类型
                                "cardNo":"",//证件号
                                "fullName":"",//真是姓名
                                "gender":"",//性别
                                "nation":"",//民族
                                "nativeAreaId":"",//籍贯区
                                "nativeCityId":"",//籍贯市
                                "nativeProvinceId":"",//籍贯省
                                "birthAndDeathDate":'',//生卒日期
                                "source":2, 
                            };
                            this.chooset3();           
                        }else{
                            this.$Message.error(response.body.message);
                        }
                    })
                    .catch(function (response) {
                        
                    });
                }
                
            },
            uploadPhotoError(file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传JPG、JPEG、PNG、BMP格式的图片。'
                });
            },
         
		},
        components: {
            
        },
    }
</script>